<template>
    <!-- 登录页面 -->
  
    <div class="login-container">
      <h2>账户登录</h2>
      <div>
        <input type="text" id="username" name="account" placeholder="账号" v-model="account" />
        <input type="password" id="password" name="password" placeholder="密码" v-model="password" />
        <button @click="login">登 录</button>
      </div>
    </div>

 
</template>

<style scoped>
   
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }

  .login-container {
    position: fixed;
    top: calc((100% - 300px) / 2);
    left: calc((100% - 400px) / 2);
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    width: 300px;
  }

  .login-container h2 {
    text-align: center;
  }

  .login-container input {
    width: 93%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
  }

  .login-container button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    margin-top: 10px;
  }

  .login-container button:hover {
    background-color: #0056b3;
  }

  .role_choose {
    width: 93%;
    padding: 10px;
    margin: 10px 0;
    border-top: 1px dashed #ccc;
    display: flex;
    justify-content: space-around;
  }

  .role_choose input {
    margin: 0;
  }

  .role_choose span {
    font-family: Arial, sans-serif;
    font-size: 14px;
  }

  .role_choose div {
    flex: 1;
    flex-direction: column;
    text-align: center;
  }
    
    
</style>

<script>
import Axios from 'axios';
import { baseurl } from '../param.js'
import { v4 as uuidv4 } from 'uuid';


export default {
    name:'UserLogin',
    data() {
      return {
        account:"",
        password:"", 
        userInfo:{}
      };
    },
    methods: {
        login() {
            if(!this.account){
                alert("请先输入账号")
                return
            }
            if(!this.password){
                alert("请先输入密码")
                return
            }
            
            var data =  new FormData()
            data.append("account",this.account)
            data.append("password",this.password)
            
            Axios.post(`${baseurl}/user/login`,data)
            .then(res=>{
                if(res.data.code){
                    alert("登录成功")
                    this.userInfo=res.data.data

                    sessionStorage.setItem("Authorization",uuidv4())
                    sessionStorage.setItem("userInfo",JSON.stringify(this.userInfo))
                    //未激活判断
                    if(this.userInfo.user_status==33){
                      this.$router.push('/active')
                    }else{
                      
                      this.$router.push('/home')
                    }
                    
                }else{
                  alert("账户或密码错误")
                  this.account = ""
                  this.password = ""
                }
            }).catch(error=>alert(error.message))
        }
      }
      
    
}
</script>